<template>
  <div class="vlog-container">
    <!-- 广告 -->
    <div id="banner"></div>
    <!-- 日志列表  -->
    <div class="vloglist" v-for="vlog in vlogs" :key="vlog.id">
      <div class="showdate">
        <p class="showyear">
          <!--显示时间戳的年份-->
          {{ new Date(vlog.createTime).getFullYear() }}
        </p>
        <p class="showmonth">
          <!--显示时间戳的日期/月份,不足2位的自动补0，比如1月1号这样子写 01/01，你真他妈傻逼-->
          0{{ new Date(vlog.createTime).getMonth() + 1 }}/ 0{{
            new Date(vlog.createTime).getDate()
          }}
        </p>
      </div>
      <div class="vlogbox">
        <p class="vlogTitle">{{ vlog.title }}</p>
        <div class="vlogContent">
          <a href="#">
            <router-link to="/log">
              <div class="video"></div>
              <p class="vlogInfo">
                {{ vlog.summary }}
              </p>
            </router-link>
          </a>
        </div>
        <div class="playInfo">
          <a href=""><span> 2</span></a>
          <a href=""><span> 14</span></a>
          <a href=""><span> 456</span></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/vlog.css";

export default {
  name: "Vlog",
  components: {},
  props: {},
  data() {
    return {
      vlogs: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    // 调用后端article/list接口获取文章列表
    this.$axios
      .get("/article/list")
      .then((res) => {
        console.log("vlogs:", res);
        this.vlogs = res.data.list; // Ensure the data structure matches
      })
      .catch((error) => {
        console.error("Error fetching vlogs:", error);
      });
  },
  mounted() {},
  methods: {},
  filters: {},
};
</script>

<style scoped lang="less">
</style>
